<template>
  <t-table
    :data="data"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    @page-change="onPageChange"
  >
    <template #status="{ row }">
      <t-tag :theme="getStatusTheme(row.status)" :variant="'light'">
        {{ getStatusText(row.status) }}
      </t-tag>
    </template>
    <template #paymentType="{ row }">
      <t-tag theme="primary" variant="light">
        {{ getPaymentTypeText(row.paymentType) }}
      </t-tag>
    </template>
    <template #contractType="{ row }">
      <t-tag theme="success" variant="light">
        {{ getContractTypeText(row.contractType) }}
      </t-tag>
    </template>
    <template #operation="{ row }">
      <t-space>
        <t-link theme="primary" hover="color" @click="handleEdit(row)">
          编辑
        </t-link>
        <t-link theme="danger" hover="color" @click="handleDelete(row)">
          删除
        </t-link>
      </t-space>
    </template>
  </t-table>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
import type { OrderInfo } from '@/api/product-orders';

const props = defineProps<{
  data: OrderInfo[];
  loading: boolean;
  pagination: {
    pageNum: number;
    pageSize: number;
    total: number;
  };
}>();

const emit = defineEmits(['page-change', 'edit', 'delete']);

const columns = computed<PrimaryTableCol[]>(() => [
  {
    title: 'ID',
    colKey: 'id',
    width: 120,
  },
  {
    title: '订单编号',
    colKey: 'orderNumber',
    width: 120,
  },
  {
    title: '用户ID',
    colKey: 'userId',
    width: 120,
  },
  {
    title: '操作',
    colKey: 'operation',
    width: 120,
    fixed: 'right',
  },
]);


const handleEdit = (row: OrderInfo) => {
  emit('edit', row);
};

const handleDelete = (row: OrderInfo) => {
  emit('delete', row);
};

const onPageChange = (pageInfo: { pageNum: number; pageSize: number }) => {
  emit('page-change', pageInfo);
};
</script>